{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>富文本编辑器</li>
  </ol>
<section class="demo-section">
<div id="pageContent">


<article><p>ZUI 推荐两种富文本编辑器解决方案：Kindeitor 和 UEditor。</p><p>ZUI 专为 Kindeitor 和 UEditor 定制了与 ZUI 风格一致的主题。</p></article>




















<script>
function onPageLoad() {
  return false;
}
function afterPageLoad() {
    var initKindeditor = function(){
        var K = window.KindEditor;
        if(K) {
            K.create('textarea.kindeditor', {
                basePath: 'dist/lib/kindeditor/',
                allowFileManager : true,
                bodyClass : 'article-content',
                cssPath: '/dist/css/zui.css'
            });

            K.create('textarea.kindeditorSimple', {
                basePath: '/dist/lib/kindeditor/',
                bodyClass : 'article-content',
                cssPath: '/dist/css/zui.css',
                resizeType : 1,
                allowPreviewEmoticons : false,
                allowImageUpload : false,
                items : [
                    'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                    'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                    'insertunorderedlist', '|', 'emoticons', 'image', 'link'
                ]
            });
        }
        setTimeout($.doc.stopPageLoading, 500);
    };

    $.getScript('dist/lib/kindeditor/kindeditor.min.js', initKindeditor);

    $(document).on('click', '.ke-dialog-mask, .ke-dialog', function(e){
        e.stopPropagation();
    });
}
</script>






<section><header><h3>Kindeitor</h3></header><article><div class="alert alert-danger">
  <h4>兼容性问题</h4>
  <p>在触摸屏或小屏幕上无法获取最佳体验。</p>
</div><p>详细用法请访问 Kindeitor 官方网站：<a target="_blank" href="http://kindeditor.org/">http://kindeditor.org/</a>，项目地址：<a target="_blank" href="https://github.com/kindsoft/kindeditor">https://github.com/kindsoft/kindeditor</a>。</p><h4>使用 Kindeitor</h4><p>Kindeitor 是作为独立组件，你手动引入 JavaScript 文件到你的页面。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"dist/lib/kindeditor/kindeditor.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></pre><p>你不需要额外引入 CSS 文件，因为 Kindeitor 的主题样式文件是通过 JavaScript 加载的。</p><div class="alert alert-primary">
  <h4>重要提示</h4>
  <p>如果你需要使用 Kindeitor 的高级功能（例如表情、地图、图片上传等），你还需要将 <code>lib/kindeditor/plugins.zip</code> 文件在你的服务器上进行解压缩，确保 <code>kindeditor.min.js</code> 文件所在的目录下有 <code>plugins</code> 文件夹。</p>
</div><h4>默认模式</h4><div class="example">
  <div class="ke-container ke-container-default" style="width: 1054px;"><div style="display:block;" class="ke-toolbar" unselectable="on"><span class="ke-outline" data-name="source" title="HTML代码" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-source" unselectable="on"></span></span><span class="ke-inline-block ke-separator"></span><span class="ke-outline" data-name="undo" title="后退(Ctrl+Z)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-undo" unselectable="on"></span></span><span class="ke-outline" data-name="redo" title="前进(Ctrl+Y)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-redo" unselectable="on"></span></span><span class="ke-inline-block ke-separator"></span><span class="ke-outline" data-name="preview" title="预览" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-preview" unselectable="on"></span></span><span class="ke-outline" data-name="print" title="打印(Ctrl+P)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-print" unselectable="on"></span></span><span class="ke-outline" data-name="template" title="插入模板" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-template" unselectable="on"></span></span><span class="ke-outline" data-name="code" title="插入程序代码" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-code" unselectable="on"></span></span><span class="ke-outline" data-name="cut" title="剪切(Ctrl+X)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-cut" unselectable="on"></span></span><span class="ke-outline" data-name="copy" title="复制(Ctrl+C)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-copy" unselectable="on"></span></span><span class="ke-outline" data-name="paste" title="粘贴(Ctrl+V)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-paste" unselectable="on"></span></span><span class="ke-outline" data-name="plainpaste" title="粘贴为无格式文本" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-plainpaste" unselectable="on"></span></span><span class="ke-outline" data-name="wordpaste" title="从Word粘贴" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-wordpaste" unselectable="on"></span></span><span class="ke-inline-block ke-separator"></span><span class="ke-outline" data-name="justifyleft" title="左对齐" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-justifyleft" unselectable="on"></span></span><span class="ke-outline" data-name="justifycenter" title="居中" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-justifycenter" unselectable="on"></span></span><span class="ke-outline" data-name="justifyright" title="右对齐" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-justifyright" unselectable="on"></span></span><span class="ke-outline" data-name="justifyfull" title="两端对齐" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-justifyfull" unselectable="on"></span></span><span class="ke-outline" data-name="insertorderedlist" title="编号" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-insertorderedlist" unselectable="on"></span></span><span class="ke-outline" data-name="insertunorderedlist" title="项目符号" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-insertunorderedlist" unselectable="on"></span></span><span class="ke-outline" data-name="indent" title="增加缩进" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-indent" unselectable="on"></span></span><span class="ke-outline" data-name="outdent" title="减少缩进" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-outdent" unselectable="on"></span></span><span class="ke-outline" data-name="subscript" title="下标" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-subscript" unselectable="on"></span></span><span class="ke-outline" data-name="superscript" title="上标" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-superscript" unselectable="on"></span></span><span class="ke-outline" data-name="clearhtml" title="清理HTML代码" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-clearhtml" unselectable="on"></span></span><span class="ke-outline" data-name="quickformat" title="一键排版" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-quickformat" unselectable="on"></span></span><span class="ke-outline" data-name="selectall" title="全选(Ctrl+A)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-selectall" unselectable="on"></span></span><span class="ke-inline-block ke-separator"></span><span class="ke-outline" data-name="fullscreen" title="全屏显示" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-fullscreen" unselectable="on"></span></span><div class="ke-hr"></div><span class="ke-outline" data-name="formatblock" title="段落" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-formatblock" unselectable="on"></span></span><span class="ke-outline" data-name="fontname" title="字体" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-fontname" unselectable="on"></span></span><span class="ke-outline" data-name="fontsize" title="文字大小" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-fontsize" unselectable="on"></span></span><span class="ke-inline-block ke-separator"></span><span class="ke-outline" data-name="forecolor" title="文字颜色" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-forecolor" unselectable="on"></span></span><span class="ke-outline" data-name="hilitecolor" title="文字背景" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-hilitecolor" unselectable="on"></span></span><span class="ke-outline" data-name="bold" title="粗体(Ctrl+B)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-bold" unselectable="on"></span></span><span class="ke-outline" data-name="italic" title="斜体(Ctrl+I)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-italic" unselectable="on"></span></span><span class="ke-outline" data-name="underline" title="下划线(Ctrl+U)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-underline" unselectable="on"></span></span><span class="ke-outline" data-name="strikethrough" title="删除线" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-strikethrough" unselectable="on"></span></span><span class="ke-outline" data-name="lineheight" title="行距" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-lineheight" unselectable="on"></span></span><span class="ke-outline" data-name="removeformat" title="删除格式" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-removeformat" unselectable="on"></span></span><span class="ke-inline-block ke-separator"></span><span class="ke-outline" data-name="image" title="图片" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-image" unselectable="on"></span></span><span class="ke-outline" data-name="multiimage" title="批量图片上传" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-multiimage" unselectable="on"></span></span><span class="ke-outline" data-name="flash" title="Flash" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-flash" unselectable="on"></span></span><span class="ke-outline" data-name="media" title="视音频" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-media" unselectable="on"></span></span><span class="ke-outline" data-name="insertfile" title="插入文件" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-insertfile" unselectable="on"></span></span><span class="ke-outline" data-name="table" title="表格" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-table" unselectable="on"></span></span><span class="ke-outline" data-name="hr" title="插入横线" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-hr" unselectable="on"></span></span><span class="ke-outline" data-name="emoticons" title="插入表情" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-emoticons" unselectable="on"></span></span><span class="ke-outline" data-name="baidumap" title="百度地图" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-baidumap" unselectable="on"></span></span><span class="ke-outline" data-name="pagebreak" title="插入分页符" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-pagebreak" unselectable="on"></span></span><span class="ke-outline" data-name="anchor" title="锚点" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-anchor" unselectable="on"></span></span><span class="ke-outline" data-name="link" title="超级链接" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-link" unselectable="on"></span></span><span class="ke-outline" data-name="unlink" title="取消超级链接" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-unlink" unselectable="on"></span></span><span class="ke-inline-block ke-separator"></span><span class="ke-outline" data-name="about" title="关于" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-about" unselectable="on"></span></span></div><div style="display: block; height: 100px;" class="ke-edit"><iframe class="ke-edit-iframe" hidefocus="true" frameborder="0" tabindex="" style="width: 100%; height: 100px;"></iframe><textarea class="ke-edit-textarea" hidefocus="true" tabindex="" style="width: 100%; height: 100px; display: none;"></textarea></div><div class="ke-statusbar"><i class="ke-statusbar-resize-icon"></i></div></div><textarea id="content" name="content" class="form-control kindeditor" style="height: 150px; display: none;">Hello, world!</textarea>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"content"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"content"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control kindeditor"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">height</span><span class="pun">:</span><span class="lit">150px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">Hello, world!</span><span class="tag">&lt;/textarea&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="typ">KindEditor</span><span class="pun">.</span><span class="pln">create</span><span class="pun">(</span><span class="str">'textarea.kindeditor'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    basePath</span><span class="pun">:</span><span class="pln"> </span><span class="str">'/dist/lib/kindeditor/'</span><span class="pun">,</span><span class="pln">
    allowFileManager </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
    bodyClass </span><span class="pun">:</span><span class="pln"> </span><span class="str">'article-content'</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>简单模式</h4><p>自定义工具栏，禁用文件上传。</p><div class="example">
  <div class="ke-container ke-container-default" style="width: 1054px;"><div style="display:block;" class="ke-toolbar" unselectable="on"><span class="ke-outline" data-name="fontname" title="字体" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-fontname" unselectable="on"></span></span><span class="ke-outline" data-name="fontsize" title="文字大小" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-fontsize" unselectable="on"></span></span><span class="ke-inline-block ke-separator"></span><span class="ke-outline" data-name="forecolor" title="文字颜色" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-forecolor" unselectable="on"></span></span><span class="ke-outline" data-name="hilitecolor" title="文字背景" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-hilitecolor" unselectable="on"></span></span><span class="ke-outline" data-name="bold" title="粗体(Ctrl+B)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-bold" unselectable="on"></span></span><span class="ke-outline" data-name="italic" title="斜体(Ctrl+I)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-italic" unselectable="on"></span></span><span class="ke-outline" data-name="underline" title="下划线(Ctrl+U)" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-underline" unselectable="on"></span></span><span class="ke-outline" data-name="removeformat" title="删除格式" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-removeformat" unselectable="on"></span></span><span class="ke-inline-block ke-separator"></span><span class="ke-outline" data-name="justifyleft" title="左对齐" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-justifyleft" unselectable="on"></span></span><span class="ke-outline" data-name="justifycenter" title="居中" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-justifycenter" unselectable="on"></span></span><span class="ke-outline" data-name="justifyright" title="右对齐" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-justifyright" unselectable="on"></span></span><span class="ke-outline" data-name="insertorderedlist" title="编号" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-insertorderedlist" unselectable="on"></span></span><span class="ke-outline" data-name="insertunorderedlist" title="项目符号" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-insertunorderedlist" unselectable="on"></span></span><span class="ke-inline-block ke-separator"></span><span class="ke-outline" data-name="emoticons" title="插入表情" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-emoticons" unselectable="on"></span></span><span class="ke-outline" data-name="image" title="图片" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-image" unselectable="on"></span></span><span class="ke-outline" data-name="link" title="超级链接" unselectable="on"><span class="ke-toolbar-icon ke-toolbar-icon-url ke-icon-link" unselectable="on"></span></span></div><div style="display: block; height: 109px;" class="ke-edit"><iframe class="ke-edit-iframe" hidefocus="true" frameborder="0" tabindex="" style="width: 100%; height: 109px;"></iframe><textarea class="ke-edit-textarea" hidefocus="true" tabindex="" style="width: 100%; height: 109px; display: none;"></textarea></div><div class="ke-statusbar"><i class="ke-statusbar-resize-icon"></i></div></div><textarea id="contentSimple" name="content" class="form-control kindeditorSimple" style="height: 150px; display: none;">Hello, world!</textarea>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"contentSimple"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"content"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"form-control kindeditorSimple"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">height</span><span class="pun">:</span><span class="lit">150px</span><span class="pun">;</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">Hello, world!</span><span class="tag">&lt;/textarea&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="typ">KindEditor</span><span class="pun">.</span><span class="pln">create</span><span class="pun">(</span><span class="str">'textarea.kindeditorSimple'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    basePath</span><span class="pun">:</span><span class="pln"> </span><span class="str">'/dist/lib/kindeditor/'</span><span class="pun">,</span><span class="pln">
    bodyClass </span><span class="pun">:</span><span class="pln"> </span><span class="str">'article-content'</span><span class="pun">,</span><span class="pln">     </span><span class="com">// 确保编辑器内的内容也应用 ZUI 排版样式</span><span class="pln">
    cssPath</span><span class="pun">:</span><span class="pln"> </span><span class="str">'/dist/css/zui.css'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 确保编辑器内的内容也应用 ZUI 排版样式</span><span class="pln">
    resizeType </span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln">
    allowPreviewEmoticons </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln">
    allowImageUpload </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln">
    items </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="str">'fontname'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'fontsize'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'|'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'forecolor'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'hilitecolor'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'bold'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'italic'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'underline'</span><span class="pun">,</span><span class="pln">
        </span><span class="str">'removeformat'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'|'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'justifyleft'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'justifycenter'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'justifyright'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'insertorderedlist'</span><span class="pun">,</span><span class="pln">
        </span><span class="str">'insertunorderedlist'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'|'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'emoticons'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'image'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'link'</span><span class="pln">
    </span><span class="pun">]</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>Kindeditor 增强功能</h4><p>相比较 Kindeditor 官方的版本，ZUI 中的 Kindeditor 功能进行了增强和优化，主要包含如下部分：</p><ul>
<li>重做了表格编辑功能，包含如下关键特性：<ul>
<li>重做 了工具栏图标，优化了插入表格交互体验，现在点击表格图标按钮，弹出行列选择面板，滑动鼠标选择要插入的表格行数和列数即可实现表格快速插入，插入表格后，光标会自动置于第一个单元格内；</li>
<li>通过 <kbd>Tab</kbd> 键来在单元格中切换光标的功能，当光标已经处于表格中的最后一个单元格时会自动创建一个新行，并将光标移到新行的第一个单元格中；</li>
<li>实现选择多个单元格功能，允许使用如下方式来进行多选操作：<ul>
<li>点击每一行的第一个单元格左侧可以快速选择整行上的所有单元格；</li>
<li>点击每一列的第一个单元格上侧可以快速选择整列上的所有单元格；</li>
<li>在一个单元格上点击并按住拖动到另一个单元格，可以选中拖放矩形区域范围内所有单元格；</li>
</ul>
</li>
<li>对选中的多个单元格一并应用样式或进行操作的功能，目前支持如下操作：<ul>
<li>对所有选中的单元格进行合并操作；</li>
<li>删除所有选中的单元格所在行或列；</li>
<li>对文本基础样式的操作，包括加粗、下划线、删除线、字体、文字颜色和背景色等；</li>
<li>对内容对齐方式的操作，包括居左、居中、局右等；</li>
<li>对内容类型的变更操作，包括切换列表类型等；</li>
</ul>
</li>
<li>重做了表格单元格样式设置对话框样式，新增了对单元格边框大小和文字颜色的设置；</li>
<li>优化表格样式设置，现在边框和隔行变色等样式会直接应用在单元格上，而不是通过 CSS 类名，避免在 ZUI 基础样式缺失的情况下丢失样式；</li>
<li>优化了右键菜单上的项目，当一些条目在特定情况下不可用时不会显示，例如当光标处于最后一行时不会出现“向下合并单元格”菜单项；</li>
<li>优化 了在表格中插入表格的交互，支持对嵌套表格进行编辑；</li>
<li>修复了有时在单元格上点击鼠标右键，弹出的右键菜单上没有包含单元格相关菜单项的问题；</li>
</ul>
</li>
<li>通过 <code>placeholder</code> 选项为编辑器设置并显示没有内容时的占位提示文本；</li>
<li>通过 <code>pasteImage</code> 选项实现贴图自动上传功能，使用该选项指定一个 URL 用于将用户从剪切板粘贴的图片 Base64 格式内容通过 POST 请求提交；</li>
<li>通过 <code>spellcheck</code> 选项启用（当选项的值为 <code>true</code> 时）或禁用（当选项的值为 <code>false</code> 时）拼写检查功能；</li>
<li>通过 <code>transferTab</code> 选项禁用编辑器内 <kbd>Tab</kbd> 键插入空格功能，转而实现激活编辑器在页面上下一个表单控件（当选项的值为 <code>true</code> 时启用该特性）；</li>
<li>通过 <code>syncAfterBlur</code> 选项实现自动在编辑器失去焦点时执行同步（<code>sync()</code>）操作（当选项的值为 <code>true</code> 时启用该特性）；</li>
<li>通过 <code>simpleWrap</code> 选项来优化源码格式化功能，当该选项为 <code>true</code> 时，源码中当块级元素内容不会显示为新的行；</li>
<li>优化表格缩进样式，现在默认缩进 2 个空格，而不是 Tab；</li>
<li>优化预览界面样式。</li>
</ul><div class="alert alert-info">
  <h4>注意</h4>
  <p>ZUI 中的 KIndeditor 依赖 jQuery 以及 ZUI 基础样式和 JS 插件，所以无法在没有引入 jQuery 和 ZUI 的环境中使用。</p>
</div></article></section>







<section><header><h3>UEditor</h3></header><article><div class="alert alert-danger">
  <h4>兼容性问题</h4>
  <p>在触摸屏或小屏幕上无法获取最佳体验。</p>
</div><h4>使用 UEditor</h4><p>因为 UEditor 用到的文件比较多，ZUI 并不提供 UEditor JavaScript 文件。你需要访问 UEditor 官方网站来下载相关资源，以下为 UEditor 相关资源网站：</p><ul>
<li>官方定制：<a target="_blank" href="http://ueditor.baidu.com/website/download.html#ubuilder">http://ueditor.baidu.com/website/download.html#ubuilder</a></li>
<li>官方下载：<a target="_blank" href="http://ueditor.baidu.com/website/download.html">http://ueditor.baidu.com/website/download.html</a></li>
<li>官方文档：<a target="_blank" href="http://fex.baidu.com/ueditor/">http://fex.baidu.com/ueditor/</a></li>
<li>项目地址：<a target="_blank" href="https://github.com/fex-team/ueditor">https://github.com/fex-team/ueditor</a></li>
</ul><h4>使用 ZUI 为 UEditor 定制的主题</h4><p>使用 ZUI 为 UEditor 定制的主题可以更改 UEditor 界面外观与 ZUI 风格保持一致。</p><p>你需要将 ZUI <code>dist/lib/ueditor/ueditor.css</code> 和 <code>dist/lib/ueditor/ueditor.min.css</code> 文件替换在 UEditor 的 <code>themes/default/css/</code> 目录下的 CSS 文件。</p></article></section></div>
</section>
{/block}